<template>
  <div
    class="box-border h-100% w-100% flex flex-col justify-between b-rd-2 p-15px"
    :style="'background-color:' + color"
  >
    <div class="font-size-18px c-white">{{ title }}</div>
    <div class="flex items-end justify-between pt-2">
      <var-button @click="check">{{ btn }}</var-button>
      <var-image class="w-40%" :src="icon" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"

const router = useRouter()

const props = withDefaults(
  defineProps<{
    path: string
    title: string
    btn?: string
    icon: string
    color: string
  }>(),
  {
    btn: "查看"
  }
)
const check = () => {
  router.push(props.path)
}
</script>
